<template>
    <div>
        <!-- 角色管理页 -->
        <el-card class="el-main-card">
            <div v-show="!open">
            <el-row :gutter="25">
                <el-col :span="10">
                    <!-- 搜索添加 -->
                    <el-input placeholder="请输入搜索内容" v-model="queryInfo.queryString" clearable @clear="findPage">
                        <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                    </el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" v-has-role="['SUPER_ADMIN']" @click="insert" >添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表 -->
            <el-table :data="tableList" v-loading="loading"
                      border stripe>
                <el-table-column type="index" label="序号"/>
                <el-table-column label="用户昵称" prop="nickName"/>
                <el-table-column label="性别" :formatter="formatSex"/>
                <el-table-column label="头像" >
                    <template slot-scope="scope">
                        <el-image style="width:100px;height: 100px"
                                  :src="scope.row.avatar"
                                  :preview-src-list="preview(scope.row.avatar)"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="角色标签">
                    <template slot-scope="scope">
                        <el-tag size="mini" v-for="(item,index) in scope.row.roles" :key="index">{{item.label}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态使用" >
                                        <template slot-scope="scope">
                                            <el-switch
                                                    @change="updateStatus(scope.row)"
                                                    v-model="scope.row.status"
                                            v-has-role="['SUPER_ADMIN']"/>

                                        </template>
                </el-table-column>
                    <!--                <el-table-column label="性别" prop="sex" :formatter="sexFormat"/>-->
                <el-table-column label="邮箱" prop="email"/>
                <el-table-column label="电话号码" prop="phoneNumber"/>
                <el-table-column label="地址" prop="address" show-overflow-tooltip/>
<!--                <el-form-item label="是否使用" prop="status" >-->
<!--                    <el-radio-group v-model="dataForm.status">-->
<!--                        <el-radio :label="0">否</el-radio>-->
<!--                        <el-radio :label="1">是</el-radio>-->
<!--                    </el-radio-group>-->

<!--                </el-form-item>-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 修改 -->
                        <el-button type="primary" v-has-role="['SUPER_ADMIN']" icon="el-icon-edit" size="mini" @click="editDialog(scope.row)"/>
                        <el-button type="danger" v-has-role="['SUPER_ADMIN']" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"/>
                    </template>
                </el-table-column>

            </el-table>



            <el-pagination
                    @size-change="handlePageSize"
                    @current-change="handlePageNumber"
                    :current-page="queryInfo.pageNumber"
                    :page-sizes="[7, 15, 25, 30]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">

            </el-pagination>
            </div>
            <handle v-show="open" :title="title" @cancel="cancel" :data-form="dataForm"></handle>

        </el-card>
    </div>
</template>


<script>
    import {mapState} from 'vuex'
    import handle from "./handle";
    export default {
        components:{
          handle
        },
        name: 'user',
        computed: {
            ...mapState(['roles'])
        },
        data() {
            return {
                queryInfo: {
                    queryString: '',
                    pageNumber: 1,
                    pageSize: 5
                },
                //选项卡
                activeName: 'first',
                //表格数据
                tableList: [],
                //总记录数
                total: 1,
                //对话框状态
                open: false,
                //对话框标题
                title: '',
                //表单
                dataForm: {},
                loading:false,
                rulesDataForm:[],

            }
        },
        created() {

            this.findPage();
        },
        methods:{
            findPage(){
                // this.loading=true
                this.$http.post("/system/user/findPage",this.queryInfo).then(res=>{
                    console.log(res)
                    this.tableList=res.data.rows
                    this.total=res.data.total
                })
            },
            //页数变化查询
            handlePageNumber(newPageNumber) {
                this.queryInfo.pageNumber = newPageNumber;
                this.findPage();
            },
            //页码变化查询
            handlePageSize(newPageSize) {
                this.queryInfo.pageSize = newPageSize;
                this.findPage();
            },
            //头像预览
            preview(src){
                         let arr=[];
                         arr.push(src)
                return arr;
            },
            //改变权限信息的状态
            updateStatus(row){
                this.$http.post('/system/user/update',row).then(res=>{
                    this.$message.success('状态更新成功')

                });
            },
        //    性别格式化
            formatSex(row){
                if(row.sex===0){
                    return '男'
                }else if(row.sex===1){
                    return '女'
                }else{
                    return  '未知'
                }
            },
            //删除用户信息
            deleteById(id) {
                // if(row.admin) return this.$message.warning('管理员角色不能操作');
                    this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //delete请求遵循restful风格
                        this.$http.delete(`/system/user/delete/${id}`).then((res) => {
                            if (!res.data.flag) return this.$message.error(res.data.message);
                            this.$message.success(res.data.message);
                            this.queryInfo.pageNumber=1
                            this.findPage();
                        });
                    }).catch(() => {
                        // 成功删除为confirm 取消为 cancel
                        return this.$message.info("操作已取消");
                    });
                },
            //    添加对话框
            //添加对话框
            addShow() {
                this.title = '添加用户';
                this.dataForm = {};
                this.open = true;
            },
            //打开编辑对话框
            editDialog(row) {
                this.title = '修改用户';
                this.dataForm = row;
                this.open = true;
            },
            //对话框关闭
            dialogClosed() {
                //重置表单
                this.$refs.dataForm.resetFields();
            },
            //点击取消
            clickCancel() {
                this.dataForm = {};
                this.open = false;
            },
            //点击确定
            clickOk() {
                //表单校验
                this.$refs.dataForm.validate((valid) => {
                    if (!valid) return this.$message.error('表单校验不通过，请认真填写后提交！');
                    this.loading = true;
                    //判断是修改还是添加
                    if (this.dataForm.id === null || this.dataForm.id === undefined) {
                        //添加
                        this.$http.post('/system/permission/insert', this.dataForm).then((res) => {
                            if (!res.data.flag) {
                                setTimeout(() => {
                                    this.loading = false;
                                }, 6000);
                                return this.$message.error(res.data.message);
                            }
                            this.open = false;
                            this.loading = false;
                            this.$message.success(res.data.message);
                            this.findPage();
                        });
                    } else {
                        //修改
                        this.$http.post('/system/permission/update', this.dataForm).then((res) => {
                            if (!res.data.flag) {
                                setTimeout(() => {
                                    this.loading = false;
                                }, 6000);
                                return this.$message.error(res.data.message);
                            }
                            this.open = false;
                            this.loading = false;
                            this.$message.success(res.data.message);
                            this.findPage();
                        });
                    }
                });
            },
            insert(){
                this.open=true
                this.title='添加用户'
            },
            cancel(val){
                console.log(val)
                this.open=false
            }
        }

    }
</script>
<style>

</style>
